<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>
    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">



</head>
<body>

<jsp:include page="${APP_PATH}/common/head-mine.jsp"/>
<div class="col-sm-12 col-md-12 col-lg-9" style="margin-left: auto;margin-right: auto;">
    <div class="my-2 p-3 bg-white rounded d-flex">
        <div class="flex-fill text-center"><a class="text-danger" href="#">公告</a></div>
        <div class="flex-fill text-center"><a class="text-dark" href="/user-message-blog">博客</a></div>
        <div class="flex-fill text-center"><a class="text-dark" href="/user-message-star">关注</a></div>
        <div class="flex-fill text-center"><a class="text-dark" href="/user-message-question">问题</a></div>
        <div class="flex-fill text-center"><a class="text-dark" href="/user-message-answer">回答</a></div>
    </div>
    <div id="items" class="my-2 p-3 bg-white rounded card-columns"></div>
    <div id="pagenav"></div>
</div>

<div class="p-4"></div>
<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>

<script>
    function buildPage(result) {
        var $items = $("#items");
        $items.empty();
        $.each(result.extend.pageInfo.list,function (index,item) {
            if (item) {//notification
                var div_card = $("<div class='card'></div>");
                var img = item.imgurl.split(",",1);
                if (img) {
                    div_card.append($("<img class='card-img-top' alt='博客封面' src='" + img + "' data-holder-rendered='true'/>"));
                }
                var div_body = $("<div class='card-body'>");
                var h5 = $("<h5 class='card-title'><a class='text-dark' href='/notification-view/" + item.id+ "'>" + item.title + "</a></h5>");
                //内容截取，并去掉HTML标签
                var content = item.content;
                content = content.substr(0, 200);

                var p = $("<p class='card-text'>" + content + "</p>");
                var p_small = $("<p class='card-text'><small class='text-muted'>" + new Date(item.edittime).toLocaleString() + "</small></p>");
                //开始封装
                div_card.append(div_body.append(h5).append(p).append(p_small)).appendTo($items);
            }
        });
    }

    function buildPage_pagenav(result) {
        var $pagenav = $("#pagenav");
        $pagenav.empty();
        var div = $("<div class='p-2'>");
        var ul = $("<ul></ul>").addClass("pagination");
        //遍历给ul中添加页码提示
        $.each(result.extend.pageInfo.navigatepageNums,function(index,item){

            var numLi = $("<li class='page-item'></li>").append($("<a class='btn btn-sm btn-outline-primary mr-2'></a>").append(item));
            if(result.extend.pageInfo.pageNum === item){
                //当前页按钮，不可点击
                numLi.find("a").removeClass("btn-outline-primary");
                numLi.find("a").addClass("disabled");
                numLi.find("a").addClass("btn-primary");
            }
            numLi.click(function(){
                toPage(item);
            });
            ul.append(numLi);
        });
        div.append(ul).appendTo($pagenav);
    }

    function toPage(pn) {
        $.ajax({
            url:'/allNotification/'+pn,
            type:'GET',
            success:function (result) {
                if (result.code === 100) {
                    buildPage(result);
                    buildPage_pagenav(result);
                }else{
                    toastr.error(result.extend.error);
                }
            }
        })
    }

    $(function () {
        toPage(1);
    });

</script>

</body>

</html>
